<script setup name="singer-main">
import { Right } from '@icon-park/vue-next'
import IconPark from '@/components/common/IconPark.vue'

defineProps({
  user: {
    type: Object
  },
  artist: {
    type: Object
  },
  introduction: {
    type: Array
  }
})
</script>

<template>
  <div v-if="user">
    <van-row gutter="24" justify="center" class="singer-main" v-if="user">
      <van-col span="22" class="singer-main-col">
        <div class="singer-main-col-more">
          <span class="singer-main-col-more-wiki">艺人百科</span>
          <IconPark :strokeWidth="3" :icon="Right" theme="filled" :size="6" />
        </div>
      </van-col>
      <van-col span="22" class="singer-main-col">
        <van-text-ellipsis class="singer-main-col-introduction" :content="artist.briefDesc" rows="3" expand-text="展开"
          collapse-text="收起" />
      </van-col>
    </van-row>
    <van-row gutter="24" justify="center" class="singer-main" v-for="i in introduction" :key="i">
      <van-col span="22" class="singer-main-col">
        <div class="singer-main-col-more">
          <span class="singer-main-col-more-wiki">{{ i.ti }}</span>
          <IconPark :strokeWidth="3" :icon="Right" theme="filled" :size="6" />
        </div>
      </van-col>
      <van-col span="22" class="singer-main-col">
        <van-text-ellipsis class="singer-main-col-introduction" :content="i.txt" rows="3" expand-text="展开"
          collapse-text="收起" />
      </van-col>
    </van-row>
  </div>
  <van-empty v-else image="https://fastly.jsdelivr.net/npm/@vant/assets/custom-empty-image.png" image-size="80"
    description="暂无该歌手信息~" />
</template>

<style scoped lang="scss">
.singer {
  &-main {
    margin: 10px 16px 0 16px;
    padding: 10px 0;
    border-radius: 14px;
    background: linear-gradient(to bottom, var(--reversal-singer-background1), var(--reversal-singer-background2));

    &-col {
      &-more {
        line-height: 30px;
        display: flex;
        align-items: center;

        &-wiki {
          font-size: 18px;
          font-weight: bold;
          color: var(--reversal-text);
        }

        .i-icon-right {
          display: flex;
          align-items: center;
          color: var(--reversal-text);
        }
      }

      &-info {
        &-nickname {
          color: var(--reversal-text);
          margin-right: 6px;
        }
      }

      &-introduction {
        font-size: 13px;
      }
    }
  }
}
</style>